<!-- <div>
  <input type="text" [(ngModel)]='things' (keyup.enter)='addTodo()'>
  <ul>
    <li *ngFor='let todo of todos'>{{todo.desc}}</li>
  </ul>
</div> -->

<section class="todoapp">
  <neo-todo-header delay="400" (textChanges)="onTextChanges($event)"
    (onEnterUp)="addTodo()"></neo-todo-header>
  <section class="main" *ngIf="todos?.length > 0">
    <input class="toggle-all" type="checkbox">
    <ul class="todo-list">
      <li *ngFor="let todo of todos" [class.completed]="false">
        <div class="view">
          <input class="toggle" type="checkbox" (click)="toggleTodo(todo)" [checked]="todo.completed">
          <label (click)="toggleTodo(todo)">{{todo.desc}}</label>
          <button class="destroy" (click)="removeTodo(todo); $event.stopPropagation()"></button>
        </div>
      </li>
    </ul>
    <neo-todo-footer [itemCount]='todos?.length'></neo-todo-footer>
  </section>
</section>
